/* Default Ubuntu Dock styling, append !important to any changed rules */

#dashtodockContainer {
  // Shrink the dash by reducing padding and border radius
  &.shrink #dash,
  &.dashtodock #dash {
    border: 1px;
    padding: 0px;
  }

  &.shrink.left #dash,
  &.dashtodock.left #dash {
    border-left: 0px;
    border-radius: 0px 9px 9px 0px;
  }

  &.shrink.right #dash,
  &.dashtodock.right #dash {
    border-right: 0px;
    border-radius: 9px 0px 0px 9px;
  }

  &.shrink.top #dash,
  &.dashtodock.top #dash {
    border-top: 0px;
    border-radius: 0px 0px 9px 9px;
  }

  &.shrink.bottom #dash,
  &.dashtodock.bottom #dash {
    border-bottom: 0px;
    border-radius: 9px 9px 0px 0px;
  }

  &.straight-corner #dash,
  &.shrink.straight-corner #dash {
    border-radius: 0px;
  }
}

.bottom #dashtodockDashScrollview,
.top #dashtodockDashScrollview {
  // Scrollview style -vertical
  -st-hfade-offset: 24px;
}

.left #dashtodockDashScrollview,
.right #dashtodockDashScrollview {
  // Scrollview style -horizontal
  -st-vfade-offset: 24px;
}

#dashtodockContainer {
  &.running-dots .dash-item-container > StButton,
  &.dashtodock .dash-item-container > StButton {
    transition-duration: 250;
    background-size: contain;
  }

  &.shrink .dash-item-container > StButton,
  &.dashtodock .dash-item-container > StButton {
    padding: 2px 4px !important;
  }

  &.extended {
    // Dash height extended to the whole available vertical space */
    &.top #dash, &.right #dash,
    &.bottom #dash, &.left #dash {
      border-radius: 0;
    }

    &.top #dash, &.bottom #dash {
      border-left: 0px;
      border-right: 0px;
    }

    &.right #dash, &.left #dash {
      border-top: 0px;
      border-bottom: 0px;
    }
  }

  &.running-dots .app-well-app.running > .overview-icon,
  &.dashtodock .app-well-app.running > .overview-icon {
    /* Running and focused application style */
    background-image: none;
  }

  &.running-dots .app-well-app.focused .overview-icon {
    background-color: rgba(238, 238, 236, 0.2);
  }

  &.dashtodock {
    .app-well-app.focused .overview-icon {
      background-color: rgba(238, 238, 236, 0.1);
    }

    #dash {
      background: #2e3436;
    }
  }

  &.opaque {
  }

  &.transparent {
  }

  .number-overlay {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
  }

  .notification-badge {
    color: rgba(255, 255, 255, 1);
    background-color: $green;
    padding: 0.2em 0.5em;
    border-radius: 1em;
    border: 1px solid darken($green,10%);
    box-shadow: -1px 1px 5px 0px transparentize(black, 0.5);
    font-weight: bold;
    text-align: center;
    margin: 2px;
  }
}

#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal {
  width: 1px;
  height: auto;
  border-right-width: 1px;
  margin: 32px 0px;
}

/* Yaru Dock styling */

#dashtodockContainer {
  // without "border: none", there is a 1px gap between windows and the dock
  &.shrink #dash,
  &.dashtodock #dash {
    border: none !important;
    box-shadow: inset 0 1px 2px -1px rgba(0, 0, 0, 0.4) !important;
  }

  &.shrink.left #dash,
  &.dashtodock.left #dash {
    border: none !important;
  }

  &.shrink.right #dash,
  &.dashtodock.right #dash {
    border: none !important;
  }

  &.shrink.top #dash,
  &.dashtodock.top #dash {
    border: none !important;
  }

  &.shrink.bottom #dash,
  &.dashtodock.bottom #dash {
    border: none !important;
  }

  &.straight-corner #dash,
  &.shrink.straight-corner #dash {
    border: none !important;
  }

  &.shrink.left #dash,
  &.dashtodock.left #dash,
  &.shrink.right #dash,
  &.dashtodock.right #dash {
    // don't let the first icon be too close to the shadow + panel
    background: $dash_bg_color;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .show-apps {
    .overview-icon {
      border-radius: $button_radius;
    }
    &:active, &:checked {
      .overview-icon {
        background-color: $base_active_color; box-shadow: none;
      }
    }
  }

  .app-well-app {
    // regular app icons
    &, & .overview-icon {
      // normal
    }

    &:active .overview-icon,
    &:checked .overview-icon {
      // when clicking on an app
    }

    &.focused .overview-icon {
      // when an app is focused
    }

    &:hover .overview-icon,
    &:focus .overview-icon,
    &:selected .overview-icon {
      // when hovering over an app
    }
  }
}
